<template>
  <div class="xblib">
    <van-grid :border="false" :column-num="2">
      <van-grid-item v-for="(v, index) in arr" :key="index">
        <van-image :src="v.imgurl" />
        <p>{{ v.name }}</p>
        <span>{{ v.price }}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>

import service from "../../../../request/service.js";

export default {
  data() {
    return {
      list: {},
      arr: [],
    };
  },
  mounted() {
    service({
      url: "api/pro/list",
      method: "get",
      params: {
        limitNum: 60,
      },
    }).then((res) => {
      res.data.data.forEach((element) => {
        this.list = {
          imgurl: element.img2,
          name: element.category,
          price: element.originprice,
        };
        this.arr.push(this.list);
      });
    });
  },
  
};
</script>

<style>
.xblib {
  width: 100%;
  display: flex;
  /* justify-content: space-around; */
  column-count: 2;
  column-gap: 0;
  margin-top: 0.625rem;
  margin-bottom: 0.3125rem;
}
</style>